<template>
  <view class="paymethod">
    <view class="pay-method-top" @click="show = !show">
      <view>{{ $t("order.methods") }}</view>
      <view>
        <view>{{ payname }}</view>
        <image
          class="right"
          :src="asyncImgs.my.icon_right_3"
          mode="aspectFit"
        ></image>
      </view>
    </view>

    <u-popup mode="bottom" v-model="show" border-radius="22">
      <view class="pay-top">
        <view>{{ $t("order.methods") }}</view>
        <image
          @click="show = !show"
          :src="asyncImgs.my.close"
          mode="aspectFit"
        ></image>
      </view>
      <view class="pay-tips">{{ $t("submit.editMethod") }}</view>
      <view class="pay-way">
        <view
          v-for="(type, index) in pay_type_list"
          :key="index"
          class="pay-way-list"
          @click="
            payway = type.payment;
            payname = type.name;
          "
          :class="payway == type.payment ? 'select-way-list' : ''"
          >{{ type.name }}</view
        >
      </view>
      <view class="confrim">
        <view @click="show = !show">{{ $t("list.confirm") }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      payway: -1,
      payname: this.$t("common.noChoose"),
    };
  },
  watch: {
    // 支付方式变化
    payway(val) {
      this.$emit("setPayPrice");
    },
  },
  props: {
    pay_type_list: {
      type: Array,
      default: function () {
        return [
          {
            icon: "https://quanqudao.we10.cn/web/v1/statics/images/recharge/icon-online.png",
            name: "线上支付",
            payment: 0,
          },
        ];
      },
    },
  },
  methods: {
    setShowPayPopup() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss" scoped>
view {
  color: #262626;
  font-size: 26rpx;
}

.paymethod {
  margin-top: 24rpx;
  padding: 46rpx 36rpx;
  border-radius: 22rpx;
  background-color: #ffffff;
}

.pay-method-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > view:last-child {
    display: flex;
    align-items: center;

    .right {
      margin-left: 20rpx;
      width: 12rpx;
      height: 20rpx;
    }
  }
}

.pay-top {
  height: 109rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 36rpx;

  view {
    font-size: 36rpx;
    font-weight: bold;
  }

  image {
    width: 40rpx;
    height: 40rpx;
  }
}

.pay-tips {
  padding: 14rpx 36rpx;
  background-color: #fbf8d9;
  font-size: 24rpx;
  color: #de6a1c;
}

.pay-way {
  padding: 24rpx 36rpx;
  display: flex;
  flex-wrap: wrap;

  .pay-way-list {
    margin-right: 24rpx;
    margin-bottom: 24rpx;
    padding: 18rpx 36rpx;
    border-radius: 30rpx;
    background-color: #f2f2f2;
    font-size: 22rpx;
    color: #bfbfbf;
  }

  .select-way-list {
    padding: 16rpx 34rpx;
    border: 1rpx solid #f2270c;
    background-color: #fcedeb;
    color: #f2270c;
  }
}

.confrim {
  margin-top: 360rpx;
  padding: 12rpx 36rpx;

  view {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #f3150c, #f14b0c);
    border-radius: 38rpx;
  }
}
</style>
